import React from 'react'
// import ReactLoading from 'react-loading'
// import random from 'lodash/random'

class Loading extends React.Component {
  constructor(props) {
    super(props)
    this.originTip = '正在生成战绩'
    this.currentRound = 0
    this.maxRound = 3
    this.interval = null

    this.state = {
      tipText: '正在生成战绩'
    }

    this.loadingTypes = ['balls', 'balls', 'bars', 'bubbles', 'cubes', 'cylon', 'spin', 'spinningBubbles', 'spokes']
  }

  componentDidMount() {
    this.textActive()
  }

  componentWillUnmount() {
    if (this.interval) {
      clearInterval(this.interval)
    }
  }

  textActive() {
    this.interval = setInterval(() => {
      this.currentRound++
      if (this.currentRound > this.maxRound) {
        this.currentRound = 0
      }
      const dots = []
      for (let i = 0; i < this.currentRound; i++) {
        dots.push('.')
      }
      this.setState({tipText: this.originTip + dots.join('')})
    }, 2000)
  }

  render() {
    const {tokenOutDated} = this.props
    const {tipText} = this.state
    // const type = this.loadingTypes[random(0, this.loadingTypes.length - 1)]
    // color="#ffc257" height="100px" width="100px"
    const loadingStyle = {
      margin: '10rem auto 3rem',
      // color: '#ffc257',
      height: '80px',
      width: '80px'
    }
    return <div className="loading-page"> 
      {/* <ReactLoading type="spokes" style={loadingStyle} delay={0}></ReactLoading> */}
      <img src='img/rotate.gif' style={loadingStyle}></img>
      <div className="loading-text">
        {tokenOutDated ? '登陆过期，请重新登陆！' : tipText}
      </div>
    </div>
  }
}

export default Loading